<template>
  <div class="mt-4 bg-gray-200 ml-2 mr-3 border border-black shadow-lg rounded-2xl">
    <div class="p-2">
      <van-row>
        <van-col span="2">
          <div class="flex items-center justify-center text-center h-full">
            <van-icon :name="homeSettingPageComponent.getFirstItem.name" size="18" class="text-slate-800" />
          </div>
        </van-col>
        <van-col span="17" offset="1" class="text-left">
          <p class="text-base relative mt-1 text-slate-800 mb-1" v-text="homeSettingPageComponent.getFirstItem.title" />
        </van-col>
        <van-col span="3" offset="1" @click="homeSettingPageComponent.getFirstItem.click">
          <div class="flex items-center justify-center h-full">
            <van-icon name="arrow" size="20" class="text-slate-800" />
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
  <div class="mt-2 bg-gray-200 ml-2 mr-3 border border-black shadow-lg rounded-2xl"
    v-for="item in homeSettingPageComponent.getAnotherItems">
    <div class="p-2">
      <van-row>
        <van-col span="2">
          <div class="flex items-center justify-center text-center h-full">
            <van-icon :name="item.name" size="18" class="text-slate-800" />
          </div>
        </van-col>
        <van-col span="17" offset="1" class="text-left">
          <p class="text-base relative mt-1 text-slate-800 mb-1" v-text="item.title" />
        </van-col>
        <van-col span="3" offset="1" @click="item.click">
          <div class="flex items-center justify-center h-full">
            <van-icon name="arrow" size="20" class="text-slate-800" />
          </div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script setup lang="ts">
const homeSettingPageComponent = useHomeSettingPageComponent();
</script>

<style scoped></style>
